<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        /* body {background-color: aqua;} */
        </style>
    <link rel="stylesheet" type="text/css" href="index.css">
    <!-- link and style , style first -->
    
    <title>Document</title>
</head>

<script>
    function goBottom() {
        window.scrollTo(0, document.documentElement.scrollHeight-document.documentElement.clientHeight);
    }
</script>
<body onload="load()" class="by" id="id-by">
  
<h1 class="bottom-bar-item" style="color: black;"><a href="javascript:void(0)" onclick="goBottom()">点击这里回到底部</a></h1>
    <div id="body">
    <a href="https://www.runoob.com">这是一个链接</a><br>
    <img src="https://www.runoob.com/images/logo.png" width="258" height="39" />
    <label>dsfhklj</label>
    <label>dsfhklj</label>
    <ul>fds</ul>
    <ul>dfskjh</ul>
    <ol>fdsa</ol>
    <ol>fdsa</ol>x
<li>dslkfj</li>
<li>dslkfj</li>
<select>dgfgds</select>
<select>gfsd</select>
<option>dsfa</option>
<option>dsfa</option>
<uhhhhnh>dsadvas</uhhhhnh>
<input type="text">
<uhhhhnh title="hello">dsadvas</uhhhhnh>
<span style="border: 1px solid red; width: 100px; display: inline-block;">kjdh</span>
<div style="border: 1px solid red; width: 100px;">kjdh</div>

<p><a href="https://www.runoob.com" 
    target="_blank">这是一个链接</a></p>
<!-- target ? what ?     -->
<p class="upper">All up</p>
<p class="lower">All lower</p>

<h3>This is a example</h3>
<p>un order</p>
<ul class="a">
    <li>dfsa</li>
    <li>dsfa</li>
    <li>fsda</li>
</ul>
<ul class="b">
    <li>dfsa</li>
    <li>dsfa</li>
    <li>fsda</li>
</ul>

<ol class="c">
    <li>fdsa</li>
    <li>fdsa</li>
    <li>fdsa</li>
</ol>


<h3 style="text-align: center;">time table</h3>
<table>
    <tr>
        
			<td id="lineTd">
				<span style="float:left;margin-top:20px;">to do list</span>
				<span style="float:right;margin-top:-10px;">week</span>
			</td>

        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <td>LiMing</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>WangWu</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>ZhaoSi</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>LiuXiao</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Zhanger</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>LiuXiao</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Zhanger</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    

</table><br><br>
<hr>

<h3 style="text-align: center;">个人简历简约版</h3>
<table class="jianli">
    <tr>
        <th>XXX的简历</th>
        
    </tr>
    <tr>
        <td>出生日期</td>
        <td class="massage"></td>
        <td>民族</td>
        <td class="massage"></td>
        <td>picture</td>
    </tr>
    
    <tr>
        <td>婚姻状况</td>
        <td class="massage"></td>
        <td>籍贯</td>
        <td class="massage"></td>
    </tr>

    
    <tr>
        <td>政治面貌</td>
        <td class="massage"></td>
        <td>邮箱</td>
        <td class="massage"></td>
    </tr>
    
    <tr>
        <td>期望月薪</td>
        <td class="massage"></td>
        <td>电话</td>
        <td class="massage"></td>
    </tr>

    
    <tr>
        <td>求职意向</td>
        <td></td>
    </tr>

    
    <tr>
        <td>兴趣爱好</td>
        <td></td>
    </tr>

    
    <tr>
        <th>教育经历</th>
        <td></td>
    </tr>

    <tr>
        <td>毕业院校</td>
        <td></td>
        <td>专业名称</td>
        <td></td>
    </tr>

    <tr>
        <td>毕业日期</td>
        <td></td>
        <td>最高学历</td>
        <td></td>
    </tr>

    <tr>
        <td>校内荣誉</td>
        <td></td>
        
    </tr>

    <tr>
        <th>个人技能及证书</th>
    </tr>

    <tr>
        <td>语言技能</td>
        <td></td>
        <td>计算机技能</td>
        <td></td>
    </tr>

    <tr>
        <td>其他技能</td>
        <td></td>
    </tr>

    <tr>
        <th>主要工作经验</th>
        <td><b>本人有5年工作经验，主要工作情况如下：</b></td>
        <td></td>
    </tr>

    <tr>
        <th>自我评价</th>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>

</table>

<br><br><br><hr>

<h4>边框</h4>
<table>
    <tr class="biankuang">
        <th>边框</th>
    </tr>
    <tr class="biankuang">
        <td>边框</td>
    </tr>
</table>

<br><br><br><hr>
<div class="div-test div-test2">
       
    wefjkadshfkasfdghjkl;koaijuhygtfjkn,,vjhbkSNLMDAKGHGDSKHLFKH的就是看见了和股市大幅。ijk/。零四hi当然是鬼鬼v买房人
    <input type="text" class="input-test"/>
    <input type="text" class="input-test">
    <input type="text" class="input-test1">
    <input data-item="kxq" type="text" class="input-test">
    <button class="btn-test">test</button>
</div>
<button class="btn-test">btn</button>

</div>
<br><br><br><hr>

<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
	
<p class="marked">带下划线的 p 段落。</p>
<div class="hgtest">dsfakjlfjladkf;</div>

<br><br><br><hr>
<div>
    <p class="overflow">dsfhklaflkadfh;kafujfigyujdkjhugysiuhijhfjikhfksjnzhflksjfsj</p>
</div>

</div>

<br><br><br><hr>

<div class="luquTable">
<h4 class="luquTableBiaoTi">录取表格</h4>
<table class="luqutable">

<tr class="topmenu">
    <th><a href="#shenfen" class="avtive"><b>省份</b></a></th>
    <th><a href="#luqunumber"><b>录取人数</b></a></th>
    <th><a href="#max"><b>最高分</b></a></th>
    <th><a href="#min"><b>最低分</b></a></th>
    <th><a href="#pingjun"><b>平均分</b></a></th>
    <th><a href="#zhongdianxian"><b>当地重点线</b></a></th>
</tr>

<tr>
    <td>湖北省</td>
    <td>197</td>
    <td>660</td>
    <td>607</td>
    <td>622</td>
    <td>535</td>
</tr>

<div>
    <tr>
        <td>重庆市</td>
        <td>68</td>
        <td>657</td>
        <td>596</td>
        <td>620</td>
        <td>533</td>
    </tr>
</div>

<div>
    <tr>
        <td>河北省</td>
        <td>132</td>
        <td>636</td>
        <td>546</td>
        <td>605</td>
        <td>543</td>
    </tr>
</div>

<div>
    <tr>
        <td>四川省</td>
        <td>125</td>
        <td>654</td>
        <td>583</td>
        <td>604</td>
        <td>530</td>
    </tr>
</div>

<div>
    <tr>
        <td>安徽省</td>
        <td>100</td>
        <td>635</td>
        <td>554</td>
        <td>599.2</td>
        <td>534</td>
    </tr>
</div>
</table>

<br><br><br><hr>

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627464844&t=c4e8c08ad78ad01e339f3a1db740d019" alt="tupian" class="img-test">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627464844&t=c4e8c08ad78ad01e339f3a1db740d019" alt="tupian">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOdKgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627464844&t=c4e8c08ad78ad01e339f3a1db740d019" alt="tupian">


<br><br><br><hr>

<h2>关于display属性测验</h2>
<div class="inline-test">
    <p>inline</p>
    <p>inline</p>
    <p>inline</p>
</div>

<br><br><br><hr>
<div class="main-nav">
    <ul>
        <li><a href="#home">主页</li>
        <li><a href="#news">新闻</li>
        <li><a href="#contact">联系</li>
        <li><a href="#about">关于</li>
    </ul>
</div>

</body>
</html>